<template>
	<div class="background">
		<loading v-if="loading"></loading>
		<div v-if="!loading">
			<div class="top">
				<div class="left" onclick="history.go(-1)">
					<div class="back"></div>
				</div>
				<div class="title">短评--{{MovieDp.subject.title}}</div>
				<div class="right"></div>
			</div>
			<div  class="all_duanping">
				<div v-for="comments in MovieDp.comments">
					<div class="duanping_stars">
						<div class="duanping_sd">
							<star class="duanping_star" :num="comments.rating.value*10"></star>
							<span class="duanping_time">{{comments.created_at}}</span>
						</div>
						<p class="duanping_comment">{{comments.content}}</p>
						<div class="author">
							<img :src="comments.author.avatar">
							<span>{{comments.author.name}}</span>
							<span class="smallCom_agreecount">{{comments.useful_count}}赞同</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import star from './star'
	import loading from './loading'
	export default {
		data() {
			return {
				MovieDp: {
					title: ''
				},
				loading: true
			}
		},
		components: {
	    star: star,
	    loading: loading
	  },
		mounted() {
			var id = this.$route.params.id
			this.$http.jsonp("https://api.douban.com/v2/movie/subject/" + id + '/comments?apikey=0b2bdeda43b5688921839c8ecb20399b').then(function(response) {
		        this.MovieDp = response.body
		        this.loading = false
		  })
		}
	}
</script>
	
<style scoped>
	.background {
		background-color: #e5e9f2;
		position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: scroll;
    font-family: FontAwesome,Helvetica,Arial,sans-serif;
	}
	.top{
		display: flex;
    height: 50px;
    width: 100%;
    background-color: #e54847;
    padding: 6px;
    box-sizing: border-box;
    color: #fff;
    font-size: 20px;
	}
	.top .left,.top .right{
		width: 50px;
		text-align: center;
		position: relative;
	}
	.top .back{
    position: absolute;
    top: 12px;
    left: 12px;
		height: 13px;
    width: 13px;
    border: 2px solid #fff;
    border-width: 0 0 2px 2px;
    transform: rotate(45deg);
	}
	.top .title{
		flex: 1;
		text-align: center;
		vertical-align: middle;
		line-height: 40px;
		overflow: hidden;
	}
	.all_duanping {
		padding: 10px;
    box-sizing: border-box;
	}
	.duanping_star{
		float: left;
		line-height: 19px;
	}
	.duanping_sd {
		margin-top: 10px;
		line-height: 20px;
	}
	.duanping_time {
		font-size: 12px;
		color:#999;
	}
	.duanping_comment {
		c    color: #333;
    font-size: 14px;
    margin-bottom: 10px;
    margin-top: 10px;
    line-height: 19px;
	}
	.all_duanping img{
		border-radius: 24px;
	}
	.author{
    border-bottom: 1px solid #d6d3d3;
    padding-bottom: 5px;
	}
	.author * {
		vertical-align: middle;
    padding-bottom: 5px;
	}
	.author span{
    margin-left: 5px;
    color: #999;
    font-size: 12px;
    line-height: 20px;
    display: inline-block;
  }
	.author .smallCom_agreecount {
    float: right;
    margin-right: 10px;
    line-height: 50px;
	}
</style>